<template>
  <div id="year">
    <div id="top">
      <p class="p1">春节不打烊 &nbsp;美礼来续航</p>
      <p>2.1 11:00 - 2.6 23:59</p>
      <div id="d1">
        <span>春节满99元顺丰/京东包邮到家</span>
        <span>查看购物公告&gt;</span>
      </div>
    </div>
    <div id="main">
      <h2>新年狂欢 福利加码</h2>
      <div class="fuli" >
        <section v-for="(v, i) in arra" :key="i">
          <p>{{v.title}}</p>
          <img class="swi-img" :src="v.img" />
        </section>
       
      </div>
      <h2>限时专享</h2>
      <div class="huangou">
          <section v-for="(v, i) in arrb" :key="i">
          <p>{{v.title}}</p>
          <img class="swi-img" :src="v.img" />
        </section>
      
      </div>
      <div class="tip">
        <p>小细跟口红</p>
        <p>不参与店铺满减</p>
        <p>2档满赠不叠加</p>
      </div>
    </div>
  </div>
</template>

<script>
import getlink from "@/apis/getapi.js";
export default {
   data() {
    return {
      arr: "",
    };
  },
    computed:{
   arra() {
      return this.arr.slice(0, 4);
    },
     arrb() {
      return this.arr.slice(0,3);
    },
  },
  mounted() {
    getlink("/data/list/lists").then((ok) => {
      console.log(ok.data.data);
        this.arr=ok.data.data
    });
  },
};
</script>

<style scoped>
#year {
  height: 7rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.2rem;
}
#top {
  background-color: rgb(153, 8, 8);
  width: 100%;
  height: 1.6rem;
  line-height: 0.25rem;
  text-align: center;

  margin-bottom: 0.2rem;
  color: rgb(253, 231, 205);
  font-weight: 600;
}
.p1 {
  padding-top: 0.3rem;
  font-size: 0.25rem;
}
#d1 {
  background-color: rgb(253, 231, 205);
  color: black;
  border-radius: 30px;
  width: 2.7rem;
  margin: 0 auto;
}
#d1 :nth-child(2) {
  background-color: rgb(185, 42, 42);
  display: inline-block;
  height: 0.18rem;
  line-height: 0.18rem;
  width: 0.95rem;
  border-radius: 30px;
  color: white;
}
#main {
  background-color: rgb(153, 8, 8);
  width: 100%;
  height: 6.5rem;
  text-align: center;
}
h2 {
  color: white;
  padding-top: 0.1rem;
  padding-bottom: 0.15rem;
}
.fuli {
  display: flex;
  height: 2.7rem;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 0 auto;
}
.fuli section {
  width: 1.5rem;
  height: 1.2rem;
}
section p {
  height: 0.25rem;
  background-color: bisque;
  line-height: 0.25rem;
  font-weight: 600;
}
#main section img {
  width: 100%;
  height: 0.9rem;
}
.huangou {
  display: flex;
  height: 1.2rem;
  justify-content: space-around;
}
.huangou section {
  width: 1rem;
  height: 1.2rem;
}
.tip {
  color: white;
  height: 0.35rem;
}
</style>